<template>
	<div class="layout-padding ">
		<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
			<el-form-item :label="$t('need.materialCode')" prop="materialCode">
				<el-input v-model="state.queryForm.materialCode" clearable :placeholder="$t('need.materialCode')" />
			</el-form-item>

			<el-form-item :label="$t('need.materialSpec')" prop="materialSpec">
				<el-input v-model="state.queryForm.materialSpec" clearable :placeholder="$t('need.materialSpec')" />
			</el-form-item>

			<el-form-item>
				<el-button type="primary" icon="search" @click="query"> {{ $t('so.query') }}</el-button>
				<el-button icon="refresh" @click="resetQuery">{{ $t('so.reset') }}</el-button>
				<el-button type="success" icon="Download" @click="exportMaterial">
					{{ $t('common.exportBtn') }}
				</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
			style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe
			:header-cell-style="tableStyle.headerCellStyle" :summary-method="getSummaries" show-summary>
			<el-table-column type="index" label="#" width="80" />
			<el-table-column prop="materialCode" :label="$t('need.materialCode')" show-overflow-tooltip width="100" />
			<el-table-column prop="materialName" :label="$t('need.materialName')" show-overflow-tooltip width="200" />
			<el-table-column prop="materialSpec" :label="$t('need.materialSpec')" show-overflow-tooltip width="300" />
			<el-table-column prop="unit" :label="$t('need.unit')" show-overflow-tooltip />
			<el-table-column prop="purchasingCycle" :label="$t('need.PurchasingCycle')" show-overflow-tooltip />
			<el-table-column prop="minimumOrder" :label="$t('need.MinimumOrder')" show-overflow-tooltip />
			<el-table-column prop="safetyStock" :label="$t('need.SafetyStock')" show-overflow-tooltip />
			<el-table-column prop="currentQty" :label="$t('need.CurrentQty')" show-overflow-tooltip>
				<template #default="scope">
					<el-tag type="primary" effect="dark">
						{{ scope.row.currentQty }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="inTransitQty" :label="$t('need.InTransitQty')" show-overflow-tooltip>
				<template #default="scope">
					<el-tag type="info" effect="dark">
						{{ scope.row.inTransitQty }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="arrivedPortQty" :label="$t('need.ArrivedPortQty')" show-overflow-tooltip>
				<template #default="scope">
					<el-tag type="success" effect="dark">
						{{ scope.row.arrivedPortQty }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="needQty" :label="$t('need.NeedQty')" show-overflow-tooltip>
				<template #default="scope">
					<el-tag type="warning" effect="dark">
						{{ scope.row.needQty }}
					</el-tag>
				</template>
			</el-table-column>
		</el-table>

		<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
	</div>
</template>


<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { GetMaterialNeeded } from '/@/api/platform/report/materialNeed';
import { ref, reactive } from 'vue';
import { ElMessage, RowAlign } from 'element-plus';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();

const getYMD = (date: any) => {
	// 获取年份
	const year = date.getFullYear();

	// 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
	const month = String(date.getMonth() + 1).padStart(2, '0');

	// 获取日期
	const day = String(date.getDate()).padStart(2, '0');

	// 拼接成 yyyy-MM-dd 格式的字符串
	const formattedDate = `${year}-${month}-${day}`;

	return formattedDate;
};

// 搜索变量
const queryRef = ref();
//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
	},
	pageList: GetMaterialNeeded,
});

const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle, downBlobFile } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	getDataList(false);
};

const query = () => {

	getDataList();
};
const exportMaterial = () => {
	downBlobFile('/report/materialNeed/ExportMaterialNeed', { "MaterialCode": state.queryForm.materialCode, "MaterialSpec": state.queryForm.materialSpec }, 'MaterialNeed.xlsx');
}
const getSummaries = (param) => {
	const { columns, data } = param
	const sums: (string | VNode)[] = []
	columns.forEach((column, index) => {
		if (index === 0) {
			sums[index] = h('div', { style: { textDecoration: 'underline', textAlign: 'center' } }, [
				'Sum',
			])
			return
		}
		if (index == 3) return;
		const values = data.map((item) => Number(item[column.property]))
		if (!values.every((value) => Number.isNaN(value))) {
			sums[index] = h('div', { style: { textAlign: 'center' } }, [
				`${values.reduce((prev, curr) => {
					const value = Number(curr)
					if (!Number.isNaN(value)) {
						return Number((prev + curr).toFixed(4))
					} else {
						return Number(prev.toFixed(4))
					}
				}, 0)}`,
			])
		}
	})

	return sums
}
</script>